<template>
  <div style="margin: 20px 20px">
    <el-tree
      :data="data"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="tree"
      highlight-current
      :props="defaultProps"
    >
    </el-tree>
    <el-button :disabled="saveBtnDisabled" type="primary" @click="save"
      >保存</el-button
    >
    <router-link :to="'/mySetting/role/list'">
      <el-button type="info" plan>取消</el-button>
    </router-link>
  </div>
</template>
<script>
import menu from "@/api/acl/menu";

export default {
  data() {
    return {
      saveBtnDisabled: false,
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      roleId: "",
    };
  },
  // 监听器
  watch: {
    $route(to, from) {
      console.log("路由变化......");
      console.log(to);
      console.log(from);
      this.init();
    },
  },

  created() {
    this.init();
  },
  methods: {
    init() {
      if (this.$route.params && this.$route.params.id) {
        this.roleId = this.$route.params.id;
        this.fetchDataById(this.roleId);
      }
    },
    fetchDataById(roleId) {
      menu.toAssign(roleId).then((response) => {
        this.data = response.data.children;
        var jsonList = JSON.parse(JSON.stringify(this.data));
        var list = [];
        this.getJsonToList(list, jsonList[0]["children"]);
        console.log("最终集合");
        console.log(list);
        this.setCheckedKeys(list);
      });
    },
    //把json数据转成string再转成对象，根据Key获取value数据
    getJsonToList(list, jsonList) {
      //遍历这个集合对象，获取key的值
      for (var i = 0; i < jsonList.length; i++) {
        if (jsonList[i]["select"] == true && jsonList[i]["level"] == 4) {
          list.push(jsonList[i]["id"]);
        }
        if (jsonList[i]["children"] != null) {
          this.getJsonToList(list, jsonList[i]["children"]);
        }
      }
    },

    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes());
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys());
    },

    setCheckedKeys(list) {
      this.$refs.tree.setCheckedKeys(list);
    },

    save() {
      this.saveBtnDisabled = true;
      var ids = this.$refs.tree.getCheckedKeys().join(",");
      //vue elementUI tree树形控件获取父节点ID的实例
      //node_modules\element-ui\lib\element-ui.common.js
      //25348行修改源码
      menu.doAssign(this.roleId, ids).then((response) => {
        if (response.success) {
          this.$message({
            type: "success",
            message: "保存成功",
          });
          this.$router.push({ path: "/mySetting/role/list" });
        }
      });
    },
  },
};
</script>
